

class ListItemBookcase extends HTMLElement
{
    constructor()
    {
        // 必须首先调用 super 方法
        super();

        // 元素的功能代码写在这里
        const shadow = this.attachShadow({ mode: "closed" });

        this.style.marginTop = "5px";

        const li = document.createElement("li");
        li.style.listStyle = "none";
        li.style.padding = "3px";

        const row = document.createElement("div");
        row.style.display = "flex";
        row.style.flexDirection = "row";
        li.appendChild(row);

        const img = document.createElement("img");
        img.alt = "书籍封面";
        img.src = this.getAttribute("src-cover");
        img.style.width = "80px";
        img.style.height = "113px";
        row.appendChild(img);

        const col = document.createElement("div");
        col.style.display = "flex";
        col.style.flexDirection = "column";
        col.style.marginLeft = "5px";

        const bookName = document.createElement("div");
        const authorName = document.createElement("div");
        const progress = document.createElement("div");
        const latest = document.createElement("div");
        bookName.innerHTML = "";
        authorName.innerHTML = "作者：";
        progress.innerHTML = "阅读到：";
        latest.innerHTML = "最新章节：";

        bookName.style.fontSize = "x-large";
        authorName.style.fontSize = "medium";
        progress.style.fontSize = "medium";
        latest.style.fontSize = "medium";

        authorName.style.marginTop = "5px";
        authorName.style.color = "gray";
        progress.style.color = "gray";
        latest.style.color = "gray";

        const bookNameSlot = document.createElement("slot");
        const authorNameSlot = document.createElement("slot");
        const progressSlot = document.createElement("slot");
        const latestSlot = document.createElement("slot");

        bookNameSlot.name = "book-name";
        authorNameSlot.name = "author-name";
        progressSlot.name = "progress";
        latestSlot.name = "latest";

        bookNameSlot.innerHTML = this.getAttribute("book-name");
        authorNameSlot.innerHTML = this.getAttribute("author-name");
        progressSlot.innerHTML = this.getAttribute("progress");
        latestSlot.innerHTML = this.getAttribute("latest");

        bookName.appendChild(bookNameSlot);
        authorName.appendChild(authorNameSlot);
        progress.appendChild(progressSlot);
        latest.appendChild(latestSlot);

        col.appendChild(bookName);
        col.appendChild(authorName);
        col.appendChild(progress);
        col.appendChild(latest);
        row.appendChild(col);

        const styleContent = document.createElement("style");
        styleContent.textContent = "li:hover { background-color: #eeeeee }";

        shadow.appendChild(li);
        shadow.appendChild(styleContent);
    }
}


customElements.define("li-bookcase", ListItemBookcase);
//customElements.define("list-item-bookcase", ListItemBookcase);

